<template>
  <div class="w-[100vw] h-[100vh] absolute top-0 left-0 bg-black ignore">
    <el-amap
      ref="amapRef"
      view-mode="3D"
      :pitch="40"
      :center="centerValue"
      :zoom="zoom"
      :style="`opacity: ${amapOpacity};`"
      @init="init"
      @complete="amapComplete"
      :doubleClickZoom="false"
    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        anchor="bottom-center"
      >
        <div slot="content">
          <div
            class="relative"
            @mouseenter="onMouseOver(marker)"
            @mouseleave="onMouseOut(marker)"
            @click="onclickmarker(marker)"
          >
            <img
              :src="marker.type == 1 ? redmapmark : mapmark"
              alt=""
              class="w-[37px] h-[88px]"
            />
            <!-- <div class="absolute bottom-[0px] left-[-2px]" v-if="marker.showdetals && marker.type == 1">
              <img class="w-[36] h-[46px] object-cover" src="@/assets/screenimg/mapimg/scaleimg.png" alt="" />
            </div> -->
            <div
              class="absolute bottom-[-10px] left-[-5px]"
              v-if="marker.showdetals && marker.type == 1"
            >
              <div class="animated-box"></div>
            </div>
            <div class="absolute top-[8px] left-[12px]">
              <div class="erduoc flex-c" v-if="marker.isfamily">
                <family class="w-[14px] h-[14px]" />
              </div>
              <div class="erduoc flex-c" v-else>
                <img
                  class="w-[14px] h-[14px]"
                  src="@/assets/screenimg/unityicon.png"
                  alt=""
                />
              </div>
            </div>
            <div
              class="absolute top-[-120px] right-[-140px]"
              v-if="marker.showdetals == true"
            >
              <div class="h-[135px]">
                <div
                  :class="
                    marker.type == 2
                      ? 'contentbgs'
                      : marker?.state?.alarm !== 0
                        ? 'contentbg'
                        : marker?.state?.fault !== 0
                          ? 'contfailure'
                          : 'contentoffline'
                  "
                >
                  <div class="relative left-0 top-0">
                    <div
                      class="w-[60px] h-[60px] rounded-[50%] flex items-center justify-center"
                    >
                      <div class="erduoc flex-c" v-if="marker.isfamily">
                        <family class="w-[26px] h-[26px]" />
                      </div>
                      <div class="erduoc flex-c" v-else>
                        <img
                          class="w-[26px] h-[27px]"
                          src="@/assets/screenimg/unityicon.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                  <div class="absolute top-[5px] left-[30px] w-[320px]">
                    <div
                      class="h-[40px] px-[10px] leading-[40px] gap-[20px] flex items-center justify-between"
                    >
                      <div class="flex items-center gap-[7px] justify-center">
                        <div
                          class="flex items-center justify-center pl-[20px] titles"
                        >
                          {{
                            marker.isfamily
                              ? marker.familyName + "-" + marker.nickName
                              : marker.projectName
                          }}
                        </div>
                      </div>
                      <div
                        class="flex items-center gap-[4px] justify-center"
                        v-if="!marker.isfamily"
                      >
                        <div
                          class="flex items-center justify-center text-[16px] whitespace-nowrap text-[#C2C7D1]"
                        >
                          <!-- 进入 -->
                        </div>
                        <div class="flex items-center justify-center">
                          <el-icon size="18">
                            <ArrowRight
                              class="w-[20px] h-[20px]"
                              color="text-[#C2C7D1]"
                            />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                    <div
                      :class="marker.type == 1 ? 'markcontent' : 'markcontents'"
                    >
                      <div class="maplistitem">
                        <div class="gradient-text number">
                          {{ isNullOrEmpty(marker?.state?.total) }}
                        </div>
                        <div class="titleitem">总数</div>
                      </div>
                      <div class="linefeng"></div>
                      <div class="maplistitem">
                        <div class="numitem text-[#ff802b]">
                          {{ isNullOrEmpty(marker?.state?.fault) }}
                        </div>
                        <div class="titleitem">故障</div>
                      </div>
                      <div class="linefeng"></div>
                      <div class="maplistitem">
                        <div class="numitem">
                          {{ isNullOrEmpty(marker?.state?.offLine) }}
                        </div>
                        <div class="titleitem">离线</div>
                      </div>
                      <div class="linefeng"></div>
                      <div class="maplistitem">
                        <div class="numitem text-[#ff4141]">
                          {{ isNullOrEmpty(marker?.state?.alarm) }}
                        </div>
                        <div class="titleitem">报警</div>
                      </div>
                      <div class="linefeng"></div>
                      <div class="maplistitem">
                        <div class="numitem text-[#35ff48]">
                          {{ isNullOrEmpty(marker?.state?.normal) }}
                        </div>
                        <div class="titleitem">正常</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from "@/utils/functions";
import mapmark from "@/assets/screenimg/mapimg/marknored.png";
import redmapmark from "@/assets/screenimg/mapimg/markred.png";

import { ArrowRight } from "@element-plus/icons-vue";
// import mapnormal from "@/assets/screenimg/screenSvg/mapnormal.svg?component"
import {
  ElAmap,
  ElAmapPolygon,
  ElAmapMouseTool,
  ElAmapMarker
} from "@vuemap/vue-amap";
import { emitter } from "@/utils/mitt";
import { showSuperviseFamilyInfo } from "@/views/large-data-screen/utils";
import family from "@/assets/screenimg/screenSvg/famly.svg?component";
import { projectalarm, projectpointsupervise } from "@/api/screen/screenmune";
import { useDataDashboardThemeStoreHook } from "@/store/modules/data-dashboard-theme";
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook();
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
const usePageVariablesStore = usePageVariablesStoreHook();
import { cloneDeep, isArray } from "@pureadmin/utils";
const defaultcenter = [103.981651, 30.722975];
const centerValue = ref(defaultcenter);
const zoom = ref(12);
const newdata = ref([]);
const createArea = ref(false);
const createType = ref("polygon");
const polygons = ref();
const channel = ref(null);
const markers = ref([]);
const isEdit = ref(false);
const amapRef = ref();
const amapOpacity = ref(0);
const props = defineProps({
  centerDialogVisible: {
    type: Boolean,
    default: false
  }
});
const footbtnid = ref(1);
const parms = ref({ commStatus: 0 });
const onclickmarker = item => {
  if (item.isfamily) {
    showSuperviseFamilyInfo(item.id);
  } else {
    let screen = cloneDeep(usePageVariablesStore.getScreen());
    console.log(usePageVariablesStore.getScreen(), "444");

    screen.project = item;
    console.log(item, "111111");

    screen.unit = {
      id: item.unityId,
      parentId: 1,
      unityName: "监管单位",
      childs: null
    };
    usePageVariablesStore.setScreen(screen);
    useDataDashboardThemeStore.CHANGE_SETTING({
      key: "dataDashboardType",
      value: 2
    });
  }
  //   channel.value.postMessage({
  //     key: "",
  //     value: cloneDeep(item),
  //     type: "changeProject"
  //   });
  //   channel.value.postMessage({
  //     key: "dataDashboardType",
  //     value: 2,
  //     type: "change"
  //   });
};

// normal （标准）、dark（幻影黑）、light（ 月光银）、whitesmoke（远山黛）、fresh（草色青）、grey（雅士灰）、graffiti（涂鸦）、macaron（马卡龙）、blue（靛青蓝）、darkblue（极夜蓝）、wine（酱籽）
let map = ref(null);
const rightlog = ref([]);
const init = e => {
  map.value = e;
  const stynane = "amap://styles/" + useDataDashboardThemeStore.getMapTheme();
  map.value.setMapStyle(stynane);
  // map.value.setFeatures(["road", "bg", "building"]);
  map.value.setFeatures(["road", "bg", "building", "point"]);
  //地图适配
  setTimeout(() => {
    map.value.setFitView();
  }, 500);
};
const amapComplete = () => {
  console.log("amapComplete");
  // amapOpacity.value = 1
};
const onMouseOver = item => {
  markers.value.forEach(items => {
    if (items.id == item.id) {
      items.showdetals = true;
    } else {
      items.showdetals = false;
    }
  });
  // centerValue.value = item.position;
};
// 鼠标移出
const onMouseOut = item => {
  item.showdetals = false;
};
const isalarem = item => {
  return item.fault + item.offLine + item.alarm > 0 ? 1 : 2;
};
const getmaplist = (type = 1) => {
  newdata.value = [];
  projectpointsupervise(parms.value).then(res => {
    if (res.code == 200) {
      res.result.family.forEach(item => {
        if (item.lng !== "" && item.lat !== "") {
          newdata.value.push({
            position: [item.lng, item.lat],
            state: item,
            familyName: item.familyName,
            draggable: false,
            showdetals: false,
            isfamily: true,
            type: isalarem(item),
            id: item.familyId,
            unityid: item.unityId,
            nickName: item.nickName
          });
        }
      });
      res.result.project.forEach(item => {
        if (item.lng !== "" && item.lat !== "") {
          newdata.value.push({
            position: [item.lng, item.lat],
            state: item,
            projectName: item.projectName,
            draggable: false,
            showdetals: false,
            isfamily: false,
            type: isalarem(item),
            id: item.projectId,
            unityId: item.unityId
          });
        }
      });
    }
    let arr1 = JSON.parse(JSON.stringify(markers.value));
    let arr2 = JSON.parse(JSON.stringify(newdata.value));
    let obj = {};
    arr1.forEach((item, index) => {
      delete item.showdetals;
    });
    arr2.forEach((item, index) => {
      delete item.showdetals;
    });
    if (
      JSON.stringify(arr1) !== JSON.stringify(arr2) ||
      markers.value.length == 0
    ) {
      markers.value = newdata.value;
    }
    if (type == 1) {
      nextTick(() => {
        init(map.value);
      });
    }
  });
};
watch(
  () => useDataDashboardThemeStore.dataDashboardButtonId,
  newVal => {
    if (newVal || newVal == 0) {
      parms.value.commStatus = newVal;
      getmaplist();
    }
  }
);
watch(
  () => useDataDashboardThemeStore.overviewCenterPoint,
  newVal => {
    if (newVal) {
      centerValue.value = newVal;
      map.value.setZoomAndCenter(18, centerValue.value);
    }
  }
);
watch(
  () => useDataDashboardThemeStore.mapTheme,
  newVal => {
    if (newVal) {
      if (map.value) {
        const stynane = "amap://styles/" + newVal; //自定义id  e9e8e6508afcdb45de31dd68cc1f500e
        map.value.setMapStyle(stynane);
      }
    }
  }
);
onMounted(() => {
  getmaplist();
});
const mesage = data => {
  getmaplist(2);
};
//消息推送
onMounted(() => {
  emitter.on("alarmEvents", mesage);
});
onBeforeUnmount(() => {
  emitter.off("alarmEvents", mesage);
});
</script>

<style lang="scss" scoped>
.markcontent {
  width: 316px;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 68px;
  // background: linear-gradient(
  //   0deg,
  //   rgba(45, 21, 21, 0.54) 0%,
  //   rgba(87, 40, 47, 0.5) 70%,
  //   rgba(255, 93, 93, 0.42) 100%
  // );
  // border: 1px solid #d82b33;

  .linefeng {
    width: 1px;
    height: 45px;
    background: linear-gradient(
      0deg,
      rgba(12, 35, 72, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 51%,
      rgba(12, 34, 70, 0.5) 100%
    );
    // opacity: 0.5;
  }

  .maplistitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .titleitem {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
      text-align: center;
    }
  }
}

.markcontents {
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 68px;
  // background: linear-gradient(
  //   0deg,
  //   rgba(34, 43, 61, 0.5) 0%,
  //   rgba(26, 32, 61, 0.4) 51%,
  //   rgba(24, 41, 84, 0.4) 100%
  // );
  // border: 1px solid rgba(62, 108, 197, 0.93);

  .linefeng {
    width: 1px;
    height: 45px;
    background: linear-gradient(
      0deg,
      rgba(12, 35, 72, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 51%,
      rgba(12, 34, 70, 0.5) 100%
    );
    // opacity: 0.5;
  }

  .maplistitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .titleitem {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
      text-align: center;
    }
  }
}

.markcontenta {
  width: 195px;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 82px;
  background: linear-gradient(
    0deg,
    rgba(45, 21, 21, 0.54) 0%,
    rgba(87, 40, 47, 0.5) 70%,
    rgba(255, 93, 93, 0.42) 100%
  );
  border: 1px solid #d82b33;

  .linefeng {
    width: 1px;
    height: 45px;
    background: linear-gradient(
      0deg,
      rgba(12, 35, 72, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 51%,
      rgba(12, 34, 70, 0.5) 100%
    );
    // opacity: 0.5;
  }

  .maplistitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .titleitem {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
      text-align: center;
    }
  }
}

.markcontentsa {
  width: 195px;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 82px;
  background: linear-gradient(
    0deg,
    rgba(34, 43, 61, 0.5) 0%,
    rgba(26, 32, 61, 0.4) 51%,
    rgba(24, 41, 84, 0.4) 100%
  );
  border: 1px solid rgba(62, 108, 197, 0.93);

  .linefeng {
    width: 1px;
    height: 45px;
    background: linear-gradient(
      0deg,
      rgba(12, 35, 72, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 51%,
      rgba(12, 34, 70, 0.5) 100%
    );
    // opacity: 0.5;
  }

  .maplistitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .titleitem {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
      text-align: center;
    }
  }
}

// .marktitle {
//   border: 1px solid #d82b33;
// }

// .marktitles {
//   border: 1px solid #3e6cc5;
// }

// 渐变文字
.gradient-text {
  background: linear-gradient(0deg, #6196ff 0%, #ffffff 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.titles {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  // font-weight: bold;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}

.erduo1 {
  box-sizing: border-box;
  // border: 2px solid #3E6CC5;
  background: url("@/assets/screenimg/screenSvg/noalarm.png") no-repeat;
  background-size: 100% 100%;

  .erduoc {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}

.erduo2 {
  // border: 2px solid #D82B33;
  box-sizing: border-box;
  // z-index: -1;
  background: url("@/assets/screenimg/screenSvg/alarm.png") no-repeat;
  background-size: 100% 100%;

  .erduoc {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    // background: linear-gradient(90deg, #D82B33 0%, #43262C 100%);
  }
}

.contentbg {
  width: 350px;
  height: 115px;
  position: relative;
  background: url("@/assets/screenimg/mapimg/contbg.png") no-repeat;
  background-size: 100% 100%;
}

.contentbgs {
  width: 350px;
  height: 115px;
  position: relative;
  background: url("@/assets/screenimg/mapimg/contbgs.png") no-repeat;
  background-size: 100% 100%;
}

.contfailure {
  width: 350px;
  height: 115px;
  position: relative;
  background: url("@/assets/screenimg/mapimg/contfailure.png") no-repeat;
  background-size: 100% 100%;
}

.contentoffline {
  width: 350px;
  height: 115px;
  position: relative;
  background: url("@/assets/screenimg/mapimg/contoffline.png") no-repeat;
  background-size: 100% 100%;
}

.animated-box {
  width: 50px;
  height: 25px;
  background-color: #4c080e;
  border-radius: 80%;
  /* 圆形盒子 */
  animation: colorRotateScale 2s infinite;
  /* 应用动画 */
}

/* 定义关键帧动画 */
@keyframes colorRotateScale {
  0% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 初始颜色 */
    transform: scale(1);
    /* 初始旋转角度和大小 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }

  25% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 颜色变化 */
    transform: scale(1.2);
    /* 旋转90度并放大 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }

  50% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 颜色变化 */
    transform: scale(1);
    /* 旋转180度并回到初始大小 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }

  75% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 颜色变化 */
    transform: scale(1.2);
    /* 旋转270度并放大 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }

  100% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 回到初始颜色 */
    transform: scale(1);
    /* 旋转360度并回到初始大小 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }
}
</style>
<style>
.zone {
  position: relative;
  z-index: 100 !important;
}

.ztow {
  position: relative;
  z-index: 1 !important;
}
</style>
